<template>
  <a-card :bordered="false">
    <h3 class="title">基本信息</h3>
    <div>
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品类型名称">
              <a-input disabled style="width: 183px" placeholder="请输入商品类型名称"
                       v-model="typeDetail.goodsTypeName"></a-input>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品类型编号">
              <a-input disabled style="width: 183px" placeholder="请输入商品类型编号"
                       v-model="typeDetail.goodsTypeCode"></a-input>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <!--第三行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品类型单位">
              <a-input disabled placeholder="请输入商品类型单位" v-model="typeDetail.unit"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <h3 class="title">配置商品参数</h3>
    <div>
      <p>注意事项：</p>
      <p>1.类型参数影响该类型的商品。</p>
      <p>2.设置的参数会直接影响到商品的参数。</p>
      <p>3.每个类型的参数最多设置20项，为避免前端显示以及商品的参数过多变动，请谨慎修改。</p>
      <p>4.商品参数用于表格化的展示商品参数属性，例如：毛重、产地、颜色、品牌、材质等等。</p>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-list
        class="demo-loadmore-list"
        :loading="loading"
        item-layout="horizontal"
        :data-source="paramList"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          参数名称{{ index + 1 }}：
          <a-input v-model="item.parameterName" disabled="true" style="width: 150px"></a-input>
          <a-button style="margin-left:20px" @click="delTypeParamFunc(item.id)">删除</a-button>
        </a-list-item>
      </a-list>
      <div>
        <br/>
        <a-button style="width: 500px;height: 36px;" @click="xianshi=true">添加</a-button>
        <br/>
      </div>

      <div v-if="xianshi" style="margin-top:20px">
        参数名称：
        <a-input v-model="parameterName" style="width: 150px"></a-input>
      </div>
      <br/>
      <a-button type="primary" style="color: #F9D532;width: 80px;height: 36px;background: #333333;border-style: none;"
                @click="addFabric(parameterName)">保存
      </a-button>&nbsp;&nbsp;
      <a-button style="width: 80px;height: 36px;;" @click="retrunshoujia">返回</a-button>
    </div>
    <!-- table区域-end -->

    <!--    <div>-->
    <!--      <a-form layout="inline">-->
    <!--        &lt;!&ndash;编辑参数&ndash;&gt;-->
    <!--        <h3 class="title">已设置的参数</h3>-->
    <!--        <a-row :gutter="24">-->
    <!--          <a-col :md="12" :sm="12">-->
    <!--            <a-form-item label="参数" v-for="item in paramList" :key="item.id">-->
    <!--              <a-input @blur="updateTypeParamFunc(item)" style="width: 150px" placeholder="请输入参数名称"-->
    <!--                       v-model="item.parameterName"></a-input>-->
    <!--            </a-form-item>-->
    <!--          </a-col>-->
    <!--        </a-row>-->

    <!--        <h3 class="title">设置新的参数</h3>-->
    <!--        &lt;!&ndash;新增参数&ndash;&gt;-->
    <!--        <a-row :gutter="24">-->
    <!--          <a-col :md="12" :sm="12">-->
    <!--            <a-form-item label="参数" v-for="(item,index) of (20 - paramList.length)" :key="index">-->
    <!--              <a-input @blur="addFabric(formindex[index])" style="width: 150px" placeholder="请输入参数名称"-->
    <!--                       v-model="formindex[index]"></a-input>-->
    <!--            </a-form-item>-->
    <!--          </a-col>-->
    <!--        </a-row>-->
    <!--      </a-form>-->
    <!--    </div>-->
    <!--    <a-button type="primary" @click="$router.go(-1)">返回</a-button>-->
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import upload from 'element-ui'
import {getAction, postAction} from "../../api/manage";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import JImageUpload from '../../components/jeecg/JImageUpload'

export default {
  name: "AddFabric",
  components: {
    JImageUpload
  },
  created() {
    this.getFabricType()
    this.listTypeParamFunc()
  },
  data() {
    return {
      rules: {
        test: [
          {required: true}
        ]
      },
      formindex: [], // 用于存储参数名称的数组
      paramList: [], // 已经设置的参数列表
      typeDetail: {}, // 商品类型详情
      xianshi: false, // 是否显示
      parameterName: '', // 参数名称
      upload,
      locale,
      url: {
        typeDetail: '/goodsCenter/typeDetail', // 商品类型详情
        saveTypeParam: '/goodsCenter/saveTypeParam', // 新增参数
        listTypeParam: '/goodsCenter/listTypeParam', // 参数列表
        updateTypeParam: '/goodsCenter/updateTypeParam', // 编辑参数
        delTypeParam: '/goodsCenter/delTypeParam', // 删除参数
      },
    }
  },
  methods: {

    /**
     * 删除参数
     */
    delTypeParamFunc(id) {
      getAction(this.url.delTypeParam, {
        'id': id
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功")
          this.listTypeParamFunc()
        }
      })
    },

    //点击取消后回到面料组列表
    retrunshoujia() {
      this.$router.go(-1)
    },

    /**
     * 更新参数
     */
    updateTypeParamFunc(param) {
      if (param.parameterName == null || param.parameterName == '') {
        return
      } else {
        postAction(this.url.updateTypeParam, param).then(res => {
          if (res.code == '200') {
            this.$message.success("编辑成功")
          }
        })
      }
    },

    /**
     * 查询已经设置的参数列表
     */
    listTypeParamFunc() {
      getAction(this.url.listTypeParam, {
        'type': this.$route.query.type
      }).then(res => {
        if (res.code == 200) {
          this.paramList = res.result
        }
      })
    },

    /**
     * 获取商品类型详情
     */
    getFabricType() {
      getAction(this.url.typeDetail, {
        'id': this.$route.query.type
      }).then(res => {
        if (res.code == 200) {
          this.typeDetail = res.result
        }
      })
    },

    /**
     * 新增商品参数
     */
    addFabric(parameterName) {
      if (parameterName == null || parameterName == '') {
        this.$message.warning("请填写参数名称")
        return
      } else {
        getAction(this.url.saveTypeParam, {
          'parameterName': parameterName,
          'type': this.$route.query.type
        }).then(res => {
          if (res.code == '200') {
            this.$message.success("添加成功")
            this.listTypeParamFunc()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
h3.title {
  height: 30px;
  line-height: 30px;
  position: relative;
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin-bottom: 25px;

  &
  :after {
    position: absolute;
    height: 100%;
    width: 5px;
    position: absolute;
    left: -25px;
    top: 0px;
    background-color: rgba(74, 74, 74, 1);
    content: "";
  }

}
</style>

